<template>
  <div ref='vantaRef' class="all">
    <div class="content">
      <div class="title">
        人机任务智能分配平台
      </div>
      <div class="en-title">
        Human machine task intelligent distribution platform
      </div>
      <div @click="move" class="button">
        <el-button round autofocus style="color: white;background-color:transparent;
  opacity:0.8;">开始
        </el-button>
      </div>
    </div>

  </div>
</template>
<script>
import * as THREE from 'three'
import Net from 'vanta/src/vanta.halo'

export default {
  name: "product",
  methods: {
    move() {
      this.$router.push('compute')
    }
  },
  mounted() {
    this.vantaEffect = Net({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
    this.vantaEffect.setOptions({
      el: "#your-element-selector",
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      baseColor: 0x475896,
      backgroundColor: 0x182052,
      xOffset: 0.16
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}
</script>

<style scoped>
.all {
  height: 100%;
}

.button {
  height: 100px;
  margin-top: 200px;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 800px;
}

.title {
  font-size: 65px;
  color: aliceblue;
  height: 100px;
  font-weight: bold;
  margin-top: 200px;
  margin-left: -700px;

}

.en-title {

  font-size: 25px;
  color: aliceblue;
  height: 100px;
  margin-left: -700px;
}
</style>
